<template>
  <BottomDrawer
    :visible="addVisible"
    :title="'充值记录'"
    :width="900"
    @close="addVisible = false"
  >
    <div class="rechargeRecord">
      <div class="rechargeRecord-page">
        <div class="rechargeRecord-page-content">
          <div class="rechargeRecord-page-form">
            <el-input
              style="width: 200px"
              placeholder="请输入内容"
              :suffix-icon="Search"
            />
          </div>
          <div class="rechargeRecord-page-table">
            <Table :columns="tableColumns" :data-source="dataSource" />
          </div>
          <div class="rechargeRecord-page-pagination">
            <Pagination
              style="margin-left: auto"
              :count="total"
              :page-size="pageSize"
              :pageNo="currentPage"
              @onPagechange="handlePageChange"
              @onSizechange="handleSizeChange"
            />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <!-- <el-button @click="addVisible = false"></el-button> -->
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import type { TableColumn } from '@/types/table';
import {getRechargeList,refundRecharge} from '@/api/patient';
const dataSource = ref<any[]>([]); // 数据源
const total = ref(10); // 总条数
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页条数
const tableColumns: TableColumn[] = [
  // {  type:"selection", width: 50,prop:'selection', label: '选择', fixed: 'left' },
  { prop: 'storageName', label: '充值单号' },
  { prop: 'createBy', label: '充值时间' },
  { prop: 'createTime', label: '充值档位' },
  { prop: 'isEnabled', label: '状态' },
  { prop: 'storageName', label: '充值金额' },
  { prop: 'createBy', label: '支付金额' },
  { prop: 'createTime', label: '最近操作人',width: 150, },
  { prop: 'isEnabled', label: '最近操作时间',width: 150, },
  {
    prop: 'action',
    label: '操作',
    type: 'action',
    componentProps: {
      fixed: 'right',
    },
    buttonGroup: [
      {
        label: '退款',
        
        type: 'text',
        color: '#D90000',
        click: (row) => {
          refundRecharge({ orderId: row.orderId }).then(() => {
            ElMessage.success('退款成功');
            rowData();
          }).catch(() => {
            //ElMessage.error('退款失败');
          });
        },
      },
    ],
  },
];

//弹窗调用
interface DialogRefType {
  open: () => void;
  handleClose: () => void;
}
const dialogRef = ref<DialogRefType | null>(null);
const title = ref<string>('');
const handlePageChange = (page: number) => {
  //console.log('当前页:', page);
  currentPage.value = page;
};
const handleSizeChange = (size: number) => {
  //console.log('每页条数:', size);
  pageSize.value = size;
};
const handleClose = (e: string) => {
  //console.log(e, '父组件方法被调用');
};
const rules = reactive<FormRules<RoleForm>>({});
const defaultProps = {
  children: 'children',
  label: 'name',
};
// 获取序列列表
const permissionsId = ref([]);
const emits = defineEmits(['refresh']);
const pageForm = ref();
// const dataType = defineProps<{ dataType: Number }>();
const superSwitch = ref(false);
const filterText = ref('');
const patientId = ref<number | null>(null);
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

defineExpose<{
  open: (id: any) => void;
}>({
  open: (id: any) => {
    addVisible.value = true;
    patientId.value = id;
    rowData();
  },
});

const addVisible = ref(false);

const formData = ref<RoleForm>({
  roleId: null,
  roleName: '',
  isEnabled: '0',
});
const rowData = async () => {
  const response = await getRechargeList({
    patientId: patientId.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value,
  });
  //console.log('rechargeList', response);
  if (response && response.data) {
    dataSource.value = response.data.list || [];
    total.value = response.data.totalCount || 0;
  }
};
const rawData = toRaw(formData.value);
const list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        label: '角色名称',
        prop: 'roleName',
        component: 'input',
      },
      {
        span: 24,
        component: 'switch',
        prop: 'status',
        label: '是否启用',
        active: 'ENABLE',
        inactive: 'DISABLE',
      },
    ],
  },
]);
const handleCheck = () => {
  const checkedNodes = treeRef.value!.getCheckedNodes();
  //console.log(checkedNodes);

  // 直接使用Set来处理formData.value.permissions，确保唯一性
  const parentKeysSet: any = [];
  const parentId: any = [];
  // const parentIdSet: Set<any> = new Set();
  // 遍历勾选的节点
  checkedNodes.forEach((node: any) => {
    // 如果节点有父节点，并且父节点的key不在Set中，则添加到Set中
    if (node.parentId) {
      parentId.push(node.parentId);
      parentKeysSet.push(node.permissionsId);
    }
  });
};
const addChannelApi = async () => {};
const editChannelApi = async () => {};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {

    } else {
      //console.log('error submit!', fields);
    }
  });
};

const getRoleMenu = async () => {};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
.rechargeRecord {
  height: 100%;
}
.rechargeRecord-dialog {
  width: 80%;
  margin: 0 auto;
}
.rechargeRecord-page {
  background: #fff;
  border-radius: 6px;
  height: 100%;
  .rechargeRecord-page-nav {
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 4px;
    border-bottom: 1px solid #e7e7e7;
    .el-dropdown-link {
      background: rgba(22, 173, 164, 0.08);
      border-radius: 0px 0px 0px 0px;
      padding: 16px 21px;
      cursor: pointer;
      color: var(--el-color-primary) !important;
      display: flex;
      font-size: 16px;
      align-items: center;
    }
  }
  .rechargeRecord-page-content {
    padding: 10px 24px;
    height: calc(100% - 50px);
    .rechargeRecord-page-form {
      display: flex;
      align-items: center;
      .rechargeRecord-page-form-right {
        margin-left: auto;
      }
    }
    .rechargeRecord-page-table {
      margin-top: 22px;
      height: 276px;
    }
    .rechargeRecord-page-pagination {
      margin-top: 24px;
      display: flex;
      align-items: center;
      .rechargeRecord-page-pagination-total {
        margin-right: auto;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
